<!DOCTYPE html>
<html lang="zh-hans-CN">
<head>
  <meta charset="UTF-8">
  <title>充值中心</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <link rel="stylesheet" href="../css/frozen.css">
  <link rel="stylesheet" href="../css/style.css?ver=1.0.2">
  <script>
    function keyYz(event) {
      var e = event.keyCode;
      if (e == 8 || (e >= 48 && e <= 57) || e == 190) {
        return true;
      }else{
        return false;
      }
    }
  </script>
</head>
<body>
<header>
  <div class="ui-slider rech-focus">
    <ul class="ui-slider-content" style="width: 300%">
      <li><span style="background-image:url(../img/focus_1.jpg)"></span></li>
      <li><span style="background-image:url(../img/focus_2.jpg)"></span></li>
      <li><span style="background-image:url(../img/focus_3.jpg)"></span></li>
    </ul>
  </div>
  <div class="ui-row-flex ui-whitespace header-tit">

    <div class="ui-col ui-nowrap">余额: 🤔 2600元</div>
    <div class="ui-col ui-flex ui-flex-pack-start select-arr">
      <select class="rech-select" name="#" id="#">
        <option value="df">卡号：12121212121</option>
        <option value="df">卡号：123dfdfds12</option>
      </select>
    </div>
    <!--<div class="ui-nowrap ht-l">余额: 2600元</div>-->
    <!--<div class="ht-r select-arr">-->
      <!--<select class="rech-select" name="#" id="#">-->
        <!--<option value="df">卡号：12121212121212121212</option>-->
        <!--<option value="df">卡号：123dfdfdsdfs12313</option>-->
      <!--</select>-->
    <!--</div>-->
  </div>
</header>

<section class="ui-panel">
  <h2 class="rech-h2">请选择金额进行充值</h2>
  <ul class="ui-grid-trisect">
    <li>
      <div class="stamp">
        <div class="stamp-info">
          <h4>￥200</h4>
          <span>实充：205元</span>
        </div>
      </div>
    </li>
    <li>
      <div class="stamp">
        <div class="stamp-info">
          <h4>￥500</h4>
          <span>实充：510元</span>
        </div>
      </div>
    </li>
    <li>
      <div class="stamp">
        <div class="stamp-info">
          <h4>￥1000</h4>
          <span>实充：1020元</span>
        </div>
      </div>
    </li>
  </ul>

  <h2 class="rech-h2">其他金额（点击输入）</h2>
  <div class="ui-form ui-border-t">
      <div class="ui-form-item ui-form-item-pure ui-border-b">
        <input type="text" placeholder="输入其他金额" onkeydown="return keyYz(event)">
      </div>

      <div class="ui-form-item ui-form-item-switch ui-border-b">
        <a href=""><small>我同意《充值协议》与《优惠规则》</small></a>
        <label class="ui-switch">
          <input type="checkbox" checked>
        </label>
      </div>
  </div>
  <div class="ui-btn-wrap">
    <button id="recharge" class="ui-btn-lg ui-btn-danger">充值</button>
  </div>
</section>


<script src="../lib/zepto.min.js"></script>
<script src="../lib/layer.js"></script>
<script src="../js/frozen.js"></script>
<script src="../js/main.js"></script>
<script>
  (function(){
    /**
     * 轮播图
     */
    var slider = new fz.Scroll('.ui-slider', {
      role: 'slider',
      indicator: true,
      autoplay: true,
      interval: 3000
    });

    /**
     * 确认充值信息
     */
    $('#recharge').on('tap',function () {
      layer.open({
        title: '信息',
        style: 'width:300px;',
        content: '<p>充值金额：9000</p><p>优&nbsp;&nbsp;&nbsp;惠：90</p><p>实际缴纳：8000</p>',
        btn: ['确定'],
        yes: function(index){
          layer.close(index);
          alert();
          window.location.href = '../user.html';
        }
      });
    });



  })();
</script>
</body>
</html>